<template>
	<uni-nav-bar title="提交订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" style="padding:10rpx 20rpx 20rpx" v-if="orderAll">
		<view class="space-between list" v-for="item in orderAll.order_goods" :key="item.id">
			<image :src="item.goods_image" mode=""></image>
			<view class="direction-start" style="height:153rpx;justify-content:space-around;width:75%;">
				<view>{{item.goods_name}}</view>
				<view class="space-between" style="width:100%;">
					<view style="font-size: 26rpx;color:#5097FB;" v-if="item.type==='gem'">
						蓝宝石：<text style="font-size: 36rpx;">{{item.score}}</text>
					</view>
					<view style="font-size: 26rpx;color: #FE412C;" v-if="item.type==='money'">
						钱包价格:<text style="font-size: 24rpx;">￥</text>
						<text style="font-size: 36rpx;">{{item.price}}</text>
					</view>
					<view>x{{item.nums}}</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部去支付 -->
	<view style="width:100%;height:100rpx;"></view>
	<view class="space-between botton" v-if="orderAll">
		<view class="center" style="font-size: 26rpx;margin-left:15rpx;">
			<view>合计：</view>
			<view>
				<view>
					蓝宝石：<text style="font-size: 36rpx;color:#5097FB;">{{orderAll.order_score}}</text>
				</view>
				<view>
					钱包价格：<text style="font-size: 24rpx;">￥</text><text
						style="font-size: 36rpx;">{{orderAll.order_price}}</text>
				</view>
			</view>
		</view>
		<view class="but" @click="paymentMeet">{{orderAll.order_score?'立即兑换':'立即支付'}}</view>
	</view>
	<uni-popup ref="popup" type="center" style="z-index: 910">
		<view class="package column" style="background:#fff;width:600rpx;">
			<view style="margin-top:20rpx;">{{text}}</view>
			<view style="margin-top:20rpx;font-size: 26rpx;">{{title}}</view>
			<view class="come" @click="jump()">{{butText}}>></view>
		</view>
	</uni-popup>
	<!-- 验证信息得膨胀蓝宝石 -->
	<TestVerify ref="phone" @confirm="confirm" :gemBei="gemBei"></TestVerify>
</template>

<script setup lang="ts">
	import { navBack, redirectTo, navTo } from '@/utils/navigator';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import TestVerify from '@c/mine/testVerify.vue';
	import { showLoading, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getOrderInfo } from '@/gql/gemstone';
	import { getActivityGem } from '@/gql/account';
	import { ref } from 'vue';
	import { getDriverID } from '@/stores/driverID';
	import { useUserStore } from '@/stores/user';
	const userInfo = useUserStore();
	const driver_id = getDriverID();
	const orderID = ref()
	const orderAll = ref()
	const popup = ref(null)
	const show = ref(false)
	const text = ref('')
	const title = ref('')
	const butText = ref('')
	const type = ref()
	const gemBei = ref()
	const phone = ref(null)
	onLoad((pearm) => {
		orderID.value = pearm.id
		init()
	})
	onShow(()=>{
		inits()
	})
	function init() {
		const payload = {
			query: getOrderInfo,
			variables: {
				order_id: Number(orderID.value)
			},
		};
		toPublish(
			'ql/score/getOrderInfo',
			payload,
			(obj : any) => {
				const { getOrderInfo } = obj.data;
				orderAll.value = getOrderInfo
			}
		);
	}
	function inits() {
		const payload = {
			query: getActivityGem,
			variables: { driver_id },
		};
		toPublish('ql/score/getActivityGem', payload, (obj) => {
			const { getActivityGem } = obj.data;
			gemBei.value = getActivityGem.gem_bei
			if (getActivityGem.nums) {
				show.value = true
			} else {
				show.value = false
			}
		});
	}
	//支付
	function paymentMeet() {
		showLoading()
		const payload = {
			driver_id,
			order_id: Number(orderID.value),
			pay_type: 'price',
			method: 'mp',
		};
		toPublish('score/payScoreOrder',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg, data } = obj;
				if (code === 1) {
					userInfo.gemstone()
					userInfo.getUserInfo()
					successToast(msg)
					redirectTo('gemstone/exchange?id=' + orderID.value)
				} else {
					type.value = data.type
					if (data.type === 'money') {
						text.value = '您当前余额不足'
						title.value = '无法购买该商品，请前往充值'
						butText.value = '去充值'
						popup.value.open()
					} else {
						text.value = '您当前蓝宝石不足'
						if (show.value) {
							title.value = '无法兑换该商品，请前往膨胀'
							butText.value = '去膨胀'
							popup.value.open()
						} else {
							title.value = '无法兑换该商品，请前往充值'
							butText.value = '去充值'
							popup.value.open()
						}
					}
				}
			}
		);
	}
	function jump() {
		popup.value.close()
		if (type.value === 'money') {
			navTo('mine/Recharge?type=1')
		} else if (type.value === 'gem' && show.value) {
			phone.value.open()
		} else {
			navTo('mine/Recharge?type=1')
		}
	}
	function confirm() {
		inits()
		userInfo.gemstone()
	}
</script>

<style scoped lang="less">
	.list {
		width: 100%;
		padding: 12rpx 0px;
		box-sizing: border-box;

		image {
			width: 153rpx;
			height: 153rpx;
			border-radius: 5px;
		}
	}

	.top {
		margin-top: 20rpx;
	}

	.botton {
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 9999;
		height: 112rpx;
		background: #FFFFFF;
		padding-left: 20rpx;
		box-sizing: border-box;

		.but {
			width: 260rpx;
			height: 112rpx;
			background: linear-gradient(-66deg, #FF7B48, #FF5B45);
			text-align: center;
			line-height: 112rpx;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.come {
		width: 285rpx;
		height: 82rpx;
		background: linear-gradient(-66deg, #FF7B48, #FF5B45);
		border-radius: 41rpx;
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		margin: 50rpx auto 20rpx;
	}
</style>